<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <title>layuiAdmin 网站用户</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport"
              content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
        <link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
    </head>
    <body>

        <div class="layui-fluid">
            <div class="layui-card">
                <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">ID</label>
                            <div class="layui-input-block">
                                <input type="text" name="id" placeholder="请输入" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">菜单名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" placeholder="请输入" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn layuiadmin-btn-useradmin" lay-submit
                                    lay-filter="LAY-user-front-search">
                                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="layui-card-body">
                    <div style="padding-bottom: 10px;">
                        <button class="layui-btn layuiadmin-btn-useradmin" data-type="add">权限分配</button>
                        <button class="layui-btn layuiadmin-btn-useradmin" data-type="batchdel">删除</button>
                    </div>

                    <table id="LAY-user-manage" lay-filter="LAY-user-manage"></table>
                    <script type="text/html" id="imgTpl">
                        <img style="display: inline-block; width: 50%; height: 100%;" src={{ d.avatar }}>
                    </script>
                    <script type="text/html" id="barDemo">
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
                        <a class="layui-btn layui-btn-xs" lay-event="addmenu">添加</a>
                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                </div>
            </div>
        </div>
        <script type="text/html" id="editboxs">
  
</script>
        <script src="../../../layuiadmin/layui/layui.js"></script>
        <script th:inline="none">
            layui.config({
                base: '../../../layuiadmin/' //静态资源所在路径
            }).extend({
                index: 'lib/index' //主入口模块
            }).use(['index', 'useradmin', 'table'], function () {
                var $ = layui.$
                    , form = layui.form
                    , table = layui.table;

                table.render({
                    elem: '#LAY-user-manage'
                    , id: 'listData'
                    , url: '/sys/menus'
                    , page: true
                    , cellMinWidth: 150 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                    , totalRow: true
                    , cols: [[
                        {type: 'checkbox'},
                        {field: 'id', title: 'ID', width: 150, sort: true, align: 'center'}
                        , {field: 'name', title: '菜单名称', align: 'center'}
                        , {field: 'parentId', width: 150, title: '菜单父类ID', align: 'center'}
                        , {field: 'menuType', title: '菜单类型', align: 'center'}
                        , {field: 'url', title: '菜单地址', align: 'center'}
                        , {fixed: 'right', title: '操作', toolbar: '#barDemo', align: 'center'}
                    ]]
                });
                //监听搜索
                form.on('submit(LAY-user-front-search)', function (data) {
                    var field = data.field;

                    //执行重载
                    table.reload('listData', {
                        where: field
                    });
                });
                //监听工具条
                table.on('tool(LAY-user-manage)', function (obj) {
                    var data = obj.data;
                    if (obj.event === 'detail') {
                        layer.msg('ID:' + data.id + ' 的查看操作');
                    } else if (obj.event === 'del') {
                        layer.confirm('真的删除行么', function (index) {
                            obj.del();
                            layer.close(index);
                        });
                    } else if (obj.event === 'edit') {
                        layer.alert('编辑行：<br>' + JSON.stringify(data))
                    } else if (obj.event === 'addmenu') {
                        layer.alert("添加菜单")
                    }
                });
                //事件
                var active = {
                    batchdel: function () {
                        var checkStatus = table.checkStatus('usertable')
                            , data = checkStatus.data; //得到选中的数据

                        if (data.length === 0) {
                            layer.msg('请选择一行');
                        } else {
                            var ids = [];
                            for (var i = 0; i < data.length; i++) {
                                ids.push(checkStatus.data[i].id)
                            }
                            layer.confirm("确认删除吗？", function () {
                                $.ajax({
                                    //几个参数需要注意一下
                                    type: "post",//方法类型
                                    url: "/deleteUser?ids=" + ids,//url
                                    //data:{"ids":ids},
                                    dataType: "json",
                                    success: function (result) {
                                        if (result.data == "success") {
                                            //layer.msg('删除成功');
                                            location.reload();
                                        } else {
                                            layer.msg('删除失败');
                                        }
                                        ;
                                        layer.close(layer.index);
                                    }
                                })
                            })
                        }
                    }
                    , add: function () {
                        layer.open({
                            type: 2
                            , title: '分配权限'
                            , content: '/toUpdateMenu'//请求地址
                            , maxmin: true
                            , area: ['600px', '400px']
                            , btn: ['确定', '取消']
                            , yes: function (index, layero) {
                                var iframeWindow = window['layui-layer-iframe' + index]
                                    , submitID = 'LAY-user-front-submit'
                                    , submit = layero.find('iframe').contents().find('#' + submitID);

                                //监听提交
                                iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                                    var field = data.field; //获取提交的字段

                                    //提交 Ajax 成功后，静态更新表格中的数据
                                    //$.ajax({});
                                    table.reload('LAY-user-front-submit'); //数据刷新
                                    layer.close(index); //关闭弹层
                                });

                                submit.trigger('click');
                            }
                        });
                    }
                };

                $('.layui-btn.layuiadmin-btn-useradmin').on('click', function () {
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });
            });
        </script>
    </body>
</html>
